import styled, { css } from 'styled-components';
import theme from 'theme';
import { circle } from 'utils/mixins';

const variants = {
    dot: css`
        position:relative;
        padding:5px;
        
        ::after{
            display:${({ show }) => (show ? "block" : "none")};
            content:'';
            ${({ theme }) => circle(theme.red, "6px")};
            position:absolute;
            right:0;
            top:0;
        }
    `,
    default: css`
        ${({ theme }) => circle(theme.red, "26px")};
        display:flex;
        align-items:center;
        justify-content:center;
        box-shadow:0px 18px 40px 0px raba(0,0,0,0.04),
        0px 6px 12px 0px rgba(0,0,0,0.08);
        ${({ showZero, count }) => !showZero && count === 0 && `visibility:hidden`}
    `,
};

const Count = styled.div`
    font-size:${() => theme.normal};
    color:white;
`

const StyleBadge = styled.div`
    display:inline-block;
    ${({ variant }) => variants[variant]} 
`;

export default StyleBadge;

export { Count };